$(document).ready(function () {
	// banner大图
	layui.use(function () {
		var form = layui.form;
		var layer = layui.layer;
		var util = layui.util;
		var $ = layui.$;
		var dropdown = layui.dropdown;
		// 事件


		dropdown.render({
			elem: $(document).find('[lay-on="menu"]'),
			className: 'menu-drop',
			data: [{
				title: 'Category',
				id: 66,
				type: 'group',
				isSpreadItem: false,
				
				child: [{
					title: 'Cute',
					id: 777,
					href: '/'
				}, {
					title: 'Sexy',
					id: 7777,
					href: '/'
				}, {
					title: 'Elegant',
					id: 77777,
					href: '/'
				}, {
					title: 'Rave',
					id: 77777,
					href: '/'
				}, {
					title: 'Colour from dark to night',
					id: 77777,
					href: '/'
				}]
			}, {
				title: 'Collect',
				id: 66,
				type: 'group',
				href: '/'
			}, {
				title: 'Shopping chart',
				id: 66,
				type: 'group',
				href: '/shopping-cart'
			},
			{
				title: 'Personal center',
				id: 66,
				type: 'group',
				isSpreadItem: false,
				child: [{
					title: 'View All Purchase',
					id: 777,
				}, {
					title: 'My Sizes',
					id: 7777,
				}, {
					title: 'Cancel Subscription',
					id: 77777,
				}, {
					title: 'Payments',
					id: 77777,
				}, {
					title: 'Change Password',
					id: 77777,
				}]
			},
			{
				title: 'Subscription',
				id: 66,
				type: 'group',
				isSpreadItem: false,
				child: [{
					title: 'How does Subscription work',
					id: 777,
					href: '/subsaription.html#how1'
				}, {
					title: 'Subscription',
					id: 7777,
					href: '/subsaription.html#subscribe'
				}, {
					title: 'Cancel Subscription',
					id: 77777,
					href: '/subsaription.html#cancel'
				}]
			},
			{
				title: 'Company',
				id: 66,
				type: 'group',
				isSpreadItem: false,
				child: [{
					title: 'About Us',
					id: 777,
					href: '/company.html'
				}, {
					title: 'Career',
					id: 7777,
					href: '/company.html#career'
				}, {
					title: 'Future Plan',
					id: 77777,
					href: '/company.html#futrre'
				}, {
					title: 'Collaboration',
					id: 77777,
					href: '/company.html#collaboration'
				}]
			}, {
				title: 'Help',
				id: 66,
				type: 'group',
				href: '/help.html'
			}, {
				title: 'Sign Out',
				id: 66,
				type: 'group',
			}
			],

			// trigger: 'click' // trigger 已配置在元素 `lay-options` 属性上
			click: function (obj) {
				this.elem.find('.text1').text(obj.title);
			}
		})

		var util = layui.util;
		var form = layui.form;
		util.on('lay-on', {
			'login': function () {
				layer.open({
					type: 1,
					area: ['1000px', 'auto'], // 宽高
					title: false, // 不显示标题栏
					closeBtn: 0,
					shadeClose: true, // 点击遮罩关闭层
					skin: 'login-dialog',
					content: `<h1>Sign in with your existing account</h1>
					<form class="layui-form">
						<div class="layui-form-item">
							<label class="layui-form-label">Username/email:</label>
							<div class="layui-input-block">
								<div class="input-style">
							<input placeholder="Enter tracking number(s)">
						</div>
						
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">Password:</label>
							<div class="layui-input-block">
								<div class="input-style">
							<input placeholder="Enter tracking number(s)">
						</div>
							</div>
						</div>
						<div class="layui-form-item center_box">
							<button class="btn">login</button>
						</div>
						</form>
					`
				});
			},
			'search_dialog': function () {
				layer.open({
					type: 1,
					offset: ['130px'],
					title: false, // 不显示标题栏
					closeBtn: 0,
					anim: 'slideDown',
					shade: 0.6,
					shadeClose: true, // 点击遮罩关闭层
					skin: 'search_dialog',
					isOutAnim: true,
					content: `
					<div class="container personal-search personal-genter">
		<div class="search-inpput">
			<div class="layui-input-split layui-input-prefix">

				<img src="images/personal-search.png" alt="">
			</div>
		   
						<input type="text" />
		</div>
		<div class="submit-button">search for</div>
	</div>`
				});
			}
		})



	})
	// 渲染


	var banner = new Swiper(".banner-swiper", {
		slidesPerView: 1,
		loop: true,
		autoHeight: true,
		autoplay: {
			delay: 5000,
			disableOnInteraction: false,
		},
		pagination: {
			el: ".banner-swiper .swiper-pagination",
			clickable: true,
		},
		navigation: {
			nextEl: ".banner-next",
			prevEl: ".banner-prev",
		},
	});

	// 第一部分轮播
	var swiper = new Swiper(".first-tab-content", {
		slidesPerView: 1,
		loop: true,
		autoplay: {
			delay: 5000,
			disableOnInteraction: false,
		},
		pagination: {
			el: ".first-plate-pagination",
			clickable: true,
			renderBullet: function (index, className) {
				switch (index) {
					case 0:
						text = "new arrival";
						break;
					case 1:
						text = "special offers";
						break;
					case 2:
						text = "best sellers";
						break;
				}
				return (
					'<span class="first-tab-item ' + className + '">' + text + "</span>"
				);
			},
		},
	});


	// 第二部分轮播
	var swiper1 = new Swiper(".shop-swiper", {
		slidesPerView: 2,
		spaceBetween: 20,
		loop: true,
		autoplay: {
			delay: 5000,
			disableOnInteraction: false,
		},
		breakpoints: {
			768: {  //当屏幕宽度大于等于768 
				slidesPerView: 4,
				spaceBetween: 20
			},
		},
	});
	swiper1.init()

	// 详情页
	var goodsDetail = new Swiper(".show-img", {
		slidesPerView: 1,
		navigation: {
			nextEl: '.img-detail-next',
			prevEl: '.img-detail-prev',
		},
		thumbs: {
			swiper: {
				el: ".goods-detail-content",
				spaceBetween: 10,
				slidesPerView: 5,
				watchSlidesVisibility: true /*避免出现bug*/,
				navigation: {
					nextEl: ".goods-detail-next",
					prevEl: ".goods-detail-prev",
				},
			},
		},
	});
	// $(".comments-like").click(function () {
	//   var path = $(this).attr("src");
	//   if (path === "images/goods-like.png") {
	//     $(this).attr("src", "images/goods-like-full.png");
	//   } else {
	//     $(this).attr("src", "images/goods-like.png");
	//   }
	// });
	// $(".comments-unlike").click(function () {
	//   var path = $(this).attr("src");
	//   if (path === "images/goods-unlike.png") {
	//     $(this).attr("src", "images/goods-unlike-full.png");
	//   } else {
	//     $(this).attr("src", "images/goods-unlike.png");
	//   }
	// });
	$(".cart-item-middle .cart-add").click(function () {
		var goodsNumber = $(this).siblings().filter(".cart-number").text();
		$(this).siblings().filter(".cart-number").text(Number(goodsNumber) + 1);
	});
	$(".cart-item-middle .cart-reduce").click(function () {
		var goodsNumber = $(this).siblings().filter(".cart-number").text();
		if (goodsNumber === "0") {
			return;
		}
		$(this).siblings().filter(".cart-number").text(Number(goodsNumber) - 1);
	});

	// $('.payment-method .layui-row li .order-img').click(function(){
	//   var imgPath = $(this).find('img').attr('src');
	//   var isRed = imgPath.substring(0,imgPath.length-4).substr(-3,3);
	//   if(isRed!=='red'){
	//     imgPath = imgPath.substring(0,imgPath.length-4)+'-red.png';
	//     $(this).find('img').attr('src',imgPath);
	//     $(this).find('.order-img-contain').css('background-color','#daa676');
	//   }

	// })
	$('.thanks-close').click(function () {
		$('.success-popup').css('display', 'none');
		$('body').css('overflow', 'auto');
	})
	$('.immediate-payment').click(function () {
		$('.success-popup').css('display', 'block');
		$('body').css('overflow', 'hidden');
	})




	$(".goods-color-option li").click(function () {
		$(this).addClass("goods-options-active");
		$(this).siblings().removeClass("goods-options-active");
	});
	$('[data-url]').click(function () {
		window.location.href = $(this).attr('data-url')
	})



	$('[animate-duration]').each(function () {
		var num = 0.5;
		if ($(this).attr('animate-duration-num')) {
			num = +$(this).attr('animate-duration-num')
		}
		$(this).css('animation-delay', (+$(this).attr('animate-duration') * num) + 's')
	})

});

